<script setup>
   

   import {ref,reactive} from 'vue'

   /**
    * 响应式概念: 当修改了数据,自动修改页面显示效果! 
    * 响应式作用: 我们只需要学习vue的页面展示技术(文本,属性,事件,标签控制[循环和判断]).页面发生标签或者文本的改变
    *            都是数据的改变!就是因为响应式的存在,将页面的dom动作变成了: 展示 + 数据的修改
    * 响应式基础: vue2中的选项式api 所有数据默认响应式,不需要我们做任何动作,使用很方便,但是能很差
    *            vue3中的组合式api 所有数据都非响应式,都需要我们使用ref,reactive处理,虽然麻烦,但是性能好!
    * 对比和区别:
    *       ref适合处理基本数据(字符串,数字,boolean),引用数据类型(数组和对象类型) [适合所有数据] [推荐]
    *       reactive只适合引用类型数据(数组,对象类型)
    *       ref使用的时候: script(js代码) 需要数据.value || template 不要value直接使用
    *       reactive使用的时候: 任何位置都可以直接使用
    *       ref可以直接给数据进行整体值替换 || reactive不能整体进行地址替换,只能改数据的属性
    * 
    */

    //1.基本类型值
    //存两个数字  班级学生数  | 学校的学生数
    let classNumber = ref(36);
    let schoolNumber = reactive(1000);
    //2.引用类型值
    //存储两个明星学员 
    let stu1 = ref({
      name: "二狗子",
      age:18
    });

    let stu2 = reactive({
      name:"驴蛋蛋",
      age:10
    }
    )
    //修改基本类型
    let changeClassNumber = ()=>{
      classNumber.value = 50;
    }
    let changeSchoolNumber = ()=>{
      schoolNumber = 2000;
    }

    //修改引用类型的属性
    let changeStu1Name = ()=>{
      stu1.value.name = "ergouzi";
    }
    let changeStu2Name =()=>{
      stu2.name = "lvdandan";
    }

    //修改引用类型的整体数据
    let changeStu1 = ()=>{
      stu1.value ={
          name: "赵红兵",
          age:38
        };
    }
    let changeStu2 =()=>{
      stu2 = {
      name: "小北京",
      age:28
    };
    }
   
</script>

<template>
    <div>
       班级人数: {{classNumber }}  <br>
       学校人数: {{schoolNumber }}  <br>
       明星学员stu1: {{stu1}} <br>
       明星学员stu2: {{stu2}} <br>
       <button @click="changeClassNumber()">修改班级人数</button>
       <button @click="changeSchoolNumber()">修改学校人数</button>
       <button @click="changeStu1Name()">修改stu1属性</button>
       <button @click="changeStu2Name()">修改stu2属性</button>
       <button @click="changeStu1()">替换stu1</button>
       <button @click="changeStu2()">替换stu2</button>
    </div>
</template>

<style scoped>
</style>
